<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>收集表单数据</title>
        <script type="text/javascript" src="../../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <form @submit.prevent="demo">
                <!-- label标签：for-为谁服务，做一个关联 -->
                <label for="zhanghao">账号：</label>
                <!-- trim修饰符：去除输入内容两边的空格，中间的无法去除 -->
                <input type="text" id="zhanghao" v-model.trim="userInfo.account"/> <br/>
                <label for="mima">密码：</label>
                <input type="password" id="mima" v-model="userInfo.password"/> <br/>
                <br/>
                <!-- number修饰符 -->
                <!-- 第一个number控制输入的不能是数值，第二个number是Vue将输入的数值转成数字，如果不加第二个会是收集成字符串 -->
                年龄: <input type="number" v-model.number="userInfo.age"/> <br/>
                性别：男
                <input type="radio" name="sex" v-model="userInfo.sex" value="male"/>女
                <input type="radio" name="sex" v-model="userInfo.sex" value="female"/> <br/><br/>
                爱好：
                学习<input type="checkbox" v-model="userInfo.hobby" value="study" />
                游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
                吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat" /> 
                <br/><br/>
                所属校区
                <select v-model="userInfo.city">
                    <option value="">请选择校区</option>
                    <option value="Beijing">北京</option>
                    <option value="Shanghai">上海</option>
                    <option value="Shenzhen">深圳</option>
                    <option value="Wuhan">武汉</option>
                </select>
                <br/><br/>
                <!-- lazy修饰符：不会实时收集内容，会在输入框失去焦点的时候收集 -->
                其他信息<textarea v-model.lazy="userInfo.other"></textarea>
                <br/><br/>
                <input type="checkbox" v-model="userInfo.agree"/>阅读并接受<a href="https://www.baidu.com">《用户协议》</a>
                <br/>
                <!-- 表单里的按钮默认会触发表单提交并跳转页面，可以绑定一个点击事件，阻止默认行为 -->
                <!-- <button @click.prevent>提交数据</button> -->
                 <!-- 提交后触发表单提交在控制台打印数据 -->
                 <button>提交数据</button>
            </form>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 创建Vue实例
            new Vue({
                el:'#root', 
                data:{  
                    userInfo:{
                        account:'',
                        password:'',
                        age:18,
                        sex:'female',
                        hobby:[], //多选框要给定数组，初始值能影响v-model收集回来的数据
                        city:'',
                        other:'',
                        agree:''
                    }
                },
                methods: {
                    demo(){
                        // 尽量不要直接访问data
                        //console.log(JSON.stringify(this._data))
                        //将提交的数据包裹成一个大对象
                        console.log(JSON.stringify(this.userInfo))
                    }
                },
            })
        </script>

        
    </body>
</html>